<template>
  <el-dialog :visible.sync="isShow" :before-close="handleCancelModal" :close-on-click-modal="false" width="640px">
    <span slot="title" v-text="formParams['menu_id'] ? '编辑菜单' : '创建菜单'" />
    <!-- 数据表单 -->
    <el-form ref="formParams" size="small" :model="formParams" label-width="120px" style="padding-right: 40px">
      <div class="partition-container">
        <div class="partition-left">
          <el-form-item class="is-required" prop="menu_name" label="菜单名称：">
            <el-input v-model="formParams.menu_name" placeholder="请输入菜单名称" />
          </el-form-item>
          <el-form-item prop="pid_arr" label="上级菜单：">
            <el-cascader
              v-model="formParams.pid_arr"
              :options="option.listData"
              :props="{ label: 'menu_name', value: 'menu_id', checkStrictly: true }"
              :clearable="true"
              :filterable="true"
            />
          </el-form-item>
          <el-form-item prop="uri" label="菜单图标：">
            <el-input v-model="formParams.icon" placeholder="请输入图标标识" />
          </el-form-item>
          <el-form-item class="is-required" prop="uri" label="菜单路径：">
            <el-input v-model="formParams.uri" placeholder="请输入该权限的访问路径" />
          </el-form-item>
          <el-form-item prop="is_hide" label="是否隐藏：">
            <el-radio-group v-model="formParams.is_hide" size="mini">
              <el-radio-button :label="0"><span style="padding: 0 5px">否</span></el-radio-button>
              <el-radio-button :label="1"><span style="padding: 0 5px">是</span></el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="sort" label="数据排序：">
            <el-input v-model="formParams.sort" placeholder="输入从小到大的排序数值" />
          </el-form-item>
          <el-form-item prop="status" label="是否启用：">
            <el-radio-group v-model="formParams.status" size="mini">
              <el-radio-button :label="0"><span style="padding: 0 5px">否</span></el-radio-button>
              <el-radio-button :label="1"><span style="padding: 0 5px">是</span></el-radio-button>
            </el-radio-group>
          </el-form-item>
        </div>
        <!-- <div class="partition-right">
          <div class="title">授权访问节点：</div>
          <div class="rule-main">
            <el-tree
              ref="rules"
              :data="option.ruleTree"
              :props="{ children: 'children', label: 'rule_name' }"
              node-key="rule_id"
              empty-text="没有任何权限节点"
              icon-class="el-icon-arrow-right"
              show-checkbox
            />
          </div>
        </div> -->
      </div>
    </el-form>
    <!-- 提交按钮 -->
    <div slot="footer" class="dialog-footer">
      <el-button size="small" :disabled="isSubmit" @click="handleCancelModal">取 消</el-button>
      <el-button type="primary" size="small" :loading="isSubmit" @click="handleSubmitForm">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { toTreeParents, treeDisableItem } from '@/utils/tree'
import { save } from '@/api/menu'
import { extract } from '@/utils/tools'

export default {
  props: {
    'isShow': { type: Boolean, default: true },
    'isUpdate': { type: Boolean, default: false },
    'itemData': { type: Object, default: null },
    'option': { type: Object, default: null }
  },
  data: function() {
    return {
      isSubmit: false,
      formParams: {
        menu_id: null,
        module: 1,
        menu_name: null,
        pid_arr: [],
        icon: null,
        uri: null,
        is_hide: 0,
        sort: 50,
        status: 1
      }
    }
  },
  mounted: function() {
    if (this.itemData) {
      if (this.isUpdate) {
        this.formParams = extract(this.formParams, this.itemData)
        // 筛选保留子级节点
        // const rules = filterChildrenIds(this.itemData.rules.map(item => { return item.rule_id }), this.itemData.rules)
        // 设置选择节点数据集
        // this.$nextTick(() => {
        //   this.$refs.rules.setCheckedKeys(rules)
        // })
        // 禁用自身或子级选项
        treeDisableItem(this.option.listData, 'menu_id', this.formParams.menu_id)
        this.formParams.pid_arr = toTreeParents(this.itemData.pid, 'menu_id', this.option.listData, 'pid', 'menu_id')
      } else {
        this.formParams.pid_arr = toTreeParents(this.itemData.menu_id, 'menu_id', this.option.listData, 'pid', 'menu_id')
      }
    } else {
      this.formParams.pid_arr = []
    }
  },
  methods: {
    handleSubmitForm() {
      this.isSubmit = true
      const length = this.formParams.pid_arr.length
      if (length > 0) {
        this.formParams.pid = this.formParams.pid_arr[length - 1]
      } else {
        this.formParams.pid = 0
      }
      // this.formParams.rules = this.$refs.rules.getHalfCheckedKeys().concat(this.$refs.rules.getCheckedKeys())
      save(this.formParams, this.formParams.menu_id || null).then(function() {
        this.$emit('on-cancel-modal', true)
      }.bind(this)).catch(function() {
        this.isSubmit = false
      }.bind(this))
    },
    // 取消弹出框
    handleCancelModal(refresh = false) {
      if (!this.isSubmit) {
        this.$emit('on-cancel-modal', refresh)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.partition-right {
  width: 200px;
  height: 304px;
  .rule-main {
    height: 269px;
  }
}
</style>
